<!--
 * @Author: w_yy
 * @Date: 2023-03-17 14:03:02
 * @LastEditors: w_yy
 * @LastEditTime: 2023-03-21 10:27:04
 * @FilePath: \vue-project\src\App.vue
 * @Copyright: 2023 沈阳东软智睿放疗技术有限公司
 * @Descripttion: 该文件用于OIS系统。版权由东软智睿放疗技术有限公司所有
-->
<template>
  <div>
    <a-button
      @click="showCard"
      v-hasPermission="['user']"
      v-onceClick:[onceTime]="10"
      >显示隐藏card</a-button
    >
    <card v-if="show" />
    <list />
  </div>
</template>

<script>
import { ref } from "vue";
import Card from "./views/Card.vue";
import List from "./views/List.vue";
import { Button } from "ant-design-vue";
export default {
  name: "App",
  components: {
    Card,
    List,
    AButton: Button,
  },
  setup() {
    let show = ref(true);
    function showCard() {
      show.value = !show.value;
    }
    return {
      showCard,
      show,
      onceTime: "s",
    };
  },
  //自定义指令
  directives: {
    //自定义指令名
    onceClick: {
      /* 
        七个钩子函数 created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted
      */
      mounted(el, binding, vnode) {
        /* 
          el dom节点
          binding对象常用属性 name, value, arg:指令参数， expression: 字符串形式的指令表达式
          vnode：Vue编写生成的虚拟dom
        */
        el.addEventListener("click", () => {
          if (!el.disabled) {
            el.disabled = true;
            let time = binding.value;
            if (binding.arg == "s") {
              time = time * 1000;
            }
            setTimeout(() => {
              el.disabled = false;
            }, time);
          }
        });
      },
    },
  },
};
</script>

<style>
</style>